<template>
  <div>
    <h3>表格使用</h3>
    <hr>
    <!--

      tableData:  表格需要渲染的数据  [{data,name,address},{},{}]
      el-table-column    列
           prop="date"    对应tableData数组中对象的属性名
           label=""       表示列名
           width="180"    表示列宽   不是必要属性

    -->
    <div id="header">
      <el-button type="primary" size="small" @click="dialogFormVisible=true">新增</el-button>
      <el-popconfirm
          title="确定删除吗？"
          @confirm="batchDel"
      >
        <el-button  slot="reference" type="danger" size="small" >批量删除</el-button>
      </el-popconfirm>

    </div>
    <el-table
        stripe
        @selection-change="handleSelectionChange"
        :data="tableData"
        style="width: 100%">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="id"
          label="ID">
      </el-table-column>
      <el-table-column
          prop="date"
          label="日期">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.row)">编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div id="pagination">

      <!--      弹出层
      dialogFormVisible   控制弹出层的显示或隐藏   true  显示  false  隐藏

      -->
      <div>
        <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="clearForm">
          <el-form :model="form">
            <el-form-item label="姓名" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址" :label-width="formLabelWidth">
              <el-input v-model="form.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="日期" :label-width="formLabelWidth">
              <el-date-picker
                  style="width: 100%"
                  v-model="form.date"
                  type="date"
                  placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <!--

      size-change  :  页面展示的条数发生改变时  自动触发   下拉选
      current-change ：  页码改变时自定触发
      currentPage     选中当前页
      page-sizes      下拉选选项

      -->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total,sizes,prev, pager, next, jumper"
          :total="100">
      </el-pagination>
    </div>
  </div>


</template>


<script>
export default {
  name: "TableView",
  data() {
    return {
      title: '新增',
      form: {
        name: '',
        address: '',
        date: ''
      },
      formLabelWidth: "80px",
      dialogFormVisible: false,
      currentPage: 1,
      multipleSelection: [],
      tableData: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: 2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        id: 4,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    // 批量删除
    batchDel(){
      if (this.multipleSelection.length == 0){
          console.log('请至少选择一条数据')
          return false
      }
      console.log('发送http请求',JSON.stringify(this.multipleSelection))

    },
    //关闭弹窗 清空表单
    clearForm() {
      this.title = '新增'
      console.log("弹窗已关闭")
      this.form = {
        name: '',
        address: '',
        date: ''
      }
    },
    //表单数据提交
    submitForm() {
      console.log(JSON.stringify(this.form));
      // 关闭弹窗
      this.dialogFormVisible = false;
    },
    handleEdit(row) {
      this.title = '编辑'
      // 发送请求  获取最新数据   {}    id
      this.form = row
      this.dialogFormVisible = true

    },
    handleDelete(row) {
      //  MessageBox 弹框
      this.$confirm('此操作将永久删除数据, 是否继续?', '删除', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确认
        console.log('删除请求已发送')
      }).catch(() => {
        console.log('删除请求已取消')
      });

      console.log(JSON.stringify(row))
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map(item => item.id)
      console.log(JSON.stringify(this.multipleSelection))
    },
    handleSizeChange(val) {
      console.log('size', val)
      // 发送分页请求   size   currentPage
    },
    handleCurrentChange(val) {
      console.log('当前页码', val)
      // 发送分页请求   size   currentPage
    },
    confirm() {
      this.$notify.warning('删除数据')
    }
  }
}
</script>


<style scoped>

#pagination {
  margin-top: 15px;
}

#header {
  margin-bottom: 15px;
}
</style>
